<template>
  <TopNavBar :title="_t18('25_title')" type="back" right />
  <div style="height: 20px;"></div>

  <div>
    <!-- 头部 -->
    <SecondContractHeader
      :coinInfo="coinInfo"
      @showSidePopup="showSidePopup"
      @currencySelect="handleCurrencySelect"
    ></SecondContractHeader>

    <!-- K线图 -->
    <Candlestick :coinInfo="coinInfo" type="secondContract"></Candlestick>

    <!-- 成交/买卖盘 -->
    <div class="order-table-wrap">
      <div class="order-table-header">
        <div class="order-table-title">
          <span class="order-table-title-main">{{ _t18('vol') }}</span>
        </div>
        <div class="order-table-history" @click="goToOrderHistory">
          {{ _t18('25_lishijilu') }}
        </div>
      </div>

      <!-- ✅ 实时成交列表（自动更新） -->
      <DealList v-if="coinInfo.coin" :coinInfo="coinInfo" :rows="20" />
    </div>
  </div>

  <div style="height: 100px;"></div>

  <!-- 底部按钮 -->
  <div class="bottom-btn-bar">
    <button class="big-black-btn" @click="goToQuantContract">{{ _t18('25_lijiweituo') }}</button>
  </div>
</template>

<script setup>
import SecondContractHeader from '@/views/trade/components/secondContract/header/index.vue'
import Candlestick from '@/views/trade/components/common/candlestick.vue'
import DealList from '@/views/trade/components/common/dealList.vue' // ✅ 实时成交组件

import { useRoute, useRouter } from 'vue-router'
import { ref, watch, onMounted } from 'vue'
import { useTradeStore } from '@/store/trade'

const tradeStore = useTradeStore()
const router = useRouter()
const $route = useRoute()
// const coinInfo = ref({})
const $router = useRouter()
const activeTab = ref('market')

// // 初始化当前币种
// const init = () => {
//   if ($route.query.symbol) {
//     coinInfo.value =
//       tradeStore.secondContractCoinList.find(
//         (item) => item.coin === $route.query.symbol
//       ) || tradeStore.secondContractCoinList[0]
//   } else {
//     coinInfo.value = tradeStore.secondContractCoinList[0]
//   }
// }

// ✅ 用 computed 实时计算币种信息
const coinInfo = computed(() => {
  const list = tradeStore.secondContractCoinList || []
  const symbol = $route.query.symbol || 'btc'
  if (!list.length) return {}

  const match = list.find(item => item.coin === symbol)
  // console.log(match)
  return match || list[0] || {}
})

// // 监听路由变化，更新币种
// watch(
//   () => $route.query.symbol,
//   (val) => {
//     coinInfo.value =
//       tradeStore.secondContractCoinList.find((item) => item.coin === val) ||
//       tradeStore.secondContractCoinList[0]
//   },
//   { deep: true }
// )

// 处理币种选择
const handleCurrencySelect = (currency) => {
  // 根据选择的币种更新当前币种信息
  // const selectedCoin = tradeStore.spotCoinList.find(item => item.symbol === currency.symbol)
  // console.log(selectedCoin)
  // if (selectedCoin) {
    coinInfo.value = currency
  //   // 更新路由参数
    $router.push({
      path: $route.path,
      query: { 
        // ...$route.query,
        symbol: currency.coin
      }
    })
  // }
  // $route.query.symbol = currency.coin
  console.log('选择的币种:', currency)
}

onMounted(() => {
  // init()
})

// ✅ 跳转：历史记录
function goToOrderHistory() {
  router.push('/quantContractOrder')
}

// ✅ 跳转：立即委托
function goToQuantContract() {
  router.push('/quantContract')
}
</script>

<style scoped>
.order-table-wrap {
  margin: 18px 0 0 0;
}
.order-table-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  background: #fff;
  padding: 10px 10px 6px;
}
.order-table-title-main {
  font-size: 20px;
  font-weight: 700;
  border-bottom: 3px solid #000;
  padding-bottom: 2px;
}
.order-table-history {
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.bottom-btn-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  box-shadow: 0 -2px 12px 0 rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0 12px 0;
  z-index: 100;
}
.big-black-btn {
  width: 90%;
  max-width: 420px;
  height: 48px;
  background: #111;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.big-black-btn:active {
  background: #333;
}
</style>
